<template>
  <div>
    当你看到这个时，远程组件应该可以工作了!
    <component :is="mode" v-bind="$attrs"></component>
    <!-- <remote-js :src="type"></remote-js> -->
  </div>
</template>

<script>
import { markRaw, h, onMounted, ref, defineComponent, reactive } from "vue";
// window.scriptLoadedevent = new CustomEvent("scriptLoaded");

export default defineComponent({
  name: "RemoteBaseComponent",
  inheritAttrs: false,
  props: {
    componentInfo: {
      type:Object,
      default(){
        return{
          js:'',
          css:'',
          libraryName:'',
          componentName:''
        }
      }
    },
  },
  // components: {
  //   'remote-js': {
  //     render() {
  //       return h('script', {
  //         type: 'text/javascript',
  //         src: `http://127.0.0.1:8888/${this.src}.js`,
  //         onload: "document.dispatchEvent(scriptLoadedevent)"
  //       });
  //     },
  //     props: {
  //       src: { type: String, required: true },
  //     },
  //   },
  // },
  // created() {
  //   document.addEventListener('scriptLoaded', (args) => {
  //       this.mode = markRaw(window.MyComponent.default);
  //   })
  // },
  setup(props, { emit }) {
    let mode = ref(null);

    const type = ref(props.type);
    /**
     * 使用动态 script方式加载远程js
     */
    function asyncScript(url) {
      // 动态script
      return new Promise((resolve, reject) => {
        const script = document.createElement("script");
        const target =
          document.getElementsByTagName("script")[0] || document.head;
        script.type = "text/javascript";
        script.src = url;
        script.onload = resolve;
        script.onerror = reject;
        target.parentNode.insertBefore(script, target);
      });
    }

    /**
     * 使用system.js加载远程js
     */
    function systemJsLoad(url) {
      window.System.import(url).then((module) => {
        console.log(module);
        mode.value = markRaw(module.default[componentName]);
      });
    }

    /**
     * ajax请求加载远程js
     */
    function ajaxLoad(url) {
      fetch(url).then((res) => {
        console.log(res);
        if (res.status === 200) {
          res.text().then((code) => {
            new Function(`${code}`)();
            // window.eval(code)
            mode.value = markRaw(window.ScadaButton.default.ScadaButton);
          });
        }
      });
    }

    async function loadScript(url, componentName) {
      // 动态script
      await asyncScript(url);
      console.log(window.ScadaButton);
      mode.value = markRaw(window.ScadaButton.default.ScadaButton);
      // 直接在index.html引入lib库，就用下面方式使用
      // mode.value = markRaw(window.ScadaButton.default.ScadaButton)
    }

    function loadStyles(url) {
      let link = document.createElement("link");
      link.rel = "stylesheet";
      link.type = "text/css";
      link.href = url;
      let head = document.getElementsByTagName("head")[0];
      head.appendChild(link);
    }
    onMounted(() => {
      loadStyles(`http://10.73.41.111:8080/Button/ScadaButton.css`);
      loadScript(
        `http://10.73.41.111:8080/Button/ScadaButton.umd.js`,
        "scadaButton"
      );
    });
    return {
      mode,
    };
  },
});
</script>